<template>
    <div class="goods">
        <router-link :to="{path:'/class/goods/detail', query:{'id': goods.id, 'timeOver':timeOvers}}" class="img">
            <img :src="goods.mainImage"/>
        </router-link>
        <div class="des">
            <p>{{ goods.name }}</p>
        </div>
        <div class="operate">
            <span class="price">￥{{ goods.price }}</span>
            <div class="countdown" v-if="type=='time'">
                <Countdown :times="{'now':nowTime,'end':goods.authEndTime}" v-on:timeOver="timeOver"></Countdown>
            </div>
            <div class="van-stepper" v-else>
                <button class="van-stepper__minus" v-show="goodNum"  @click="reduceNum(goods.mainSkuId)"></button>
                <input type="number" v-show="goodNum" v-model="goodNum" readonly class="van-stepper__input">
                <button class="van-stepper__plus" @click="addNum(goods.mainSkuId)"></button>
            </div>
        </div>
    </div>
</template>

<script>
import Countdown from '@/components/countdown'
import { addGoods, redGoods } from '@/api/getData'
export default {
    name: 'goods',
    components: {
        Countdown
    },
    props: {
        goods: {}, //Array,           //商品数据 ,     
        type: '',   
        nowTime: '',
        timeOvers: '',
    },
    data() {
        return {
            goodNum: 0,
        }
    },
    created() {
    },
    methods: {
        addNum(skuId) {
            let info = this.$store.state.goods.useInfo;
            if(!info.token){
                this.$router.push('/login');
                return;
            }
            info.skuId = skuId;
            addGoods(info).then(res =>{
                this.goodNum +=1;
            }).catch(err =>{
                this.$toast(err.msg);
            })
        },

        reduceNum(skuId) {
            let info = this.$store.state.goods.useInfo;
            if(!info.token){
                this.$router.push('/login');
                return;
            }
            info.skuId = skuId;
            redGoods(info).then(res =>{
                this.goodNum -=1;
            }).catch(err =>{
                this.$toast(err.msg);
            })
        },

        timeOver(val){
            this.timeOvers = val;
        }
    },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/styles/color.scss';
.goods{
    position: relative;
    width: 44%;
    height: 4rem;
    float: left;
    margin: 20px 3%;
    .img{
        display: inline-block;
        width: 2rem;
        height: 2rem;
        position: relative;
        left: 50%;
        margin-left: -1rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .des{
        margin: 5px 10px;
    }
    .operate{
        position: relative;
        margin-left: 10px;
        .price{
            font-size: 15px;
            color: $price_color;
        }
        .van-stepper{
            position: absolute;
            bottom: -13px;
            right: 0px;
            .van-stepper__input{
                border: none;
            }
            .van-stepper__minus, .van-stepper__plus{
                width: 30px;
                border-radius: 50%;
                border: none;
                background-color: #7cb92e;
                margin-bottom: 10px;
            }
            .van-stepper__minus::after, .van-stepper__minus::before, .van-stepper__plus::after, .van-stepper__plus::before{
                background-color: #fff;
            }
        }
        .countdown{
            float: right;
            margin-right: 4px;
        }
    }
}
</style>
